
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>报名</title>
    <link rel="stylesheet" href="/${BasePath}/static/css/weui.css" media="all" />
    <link rel="stylesheet" href="/${BasePath}/static/css/layer.css" media="all" />
    <link rel="stylesheet" href="/${BasePath}/static/css/font-awesome.min.css" media="all" />
    <style type="text/css">
        body{background: #ddcba3;padding-bottom: 65px}
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .img{width: 100%; height:auto;display: block;}
        .fixed-bottom{position: fixed;bottom: 0;left: 0;right: 0}
        .flex{padding: 0 15px}
        .flex .placeholder{text-align: center;font-size:0.8rem}
        .head{padding: 10px 0;background: #ddc48b}
        .head .weui-flex__item:not(:nth-child(3n)){
            border-right: 1px solid #3e2d26
        }
        .time{margin:20px auto;}
        .weui-input{border: 1px solid #ddd;padding: 10px; line-height: 1.3333;height: 100%;background: #fff}
        .search-btn{background: #ec1043;padding: 10px 20px;color: #fff}
        .person-list{margin: 20px auto;overflow: hidden;}
        .result{overflow: hidden;margin: 10px auto}
        .detail{padding:5px;background:#fff}
        .person-list .item,.w50{float: left;width: 50%}
        .person-list .item .zan{line-height: 30px;color: #ec1043}
        .zan-btn{display:block;width: 100%;line-height:30px;text-align: center;background-color: #ec1043;color: #fff;}
        .music,.tousu{
        	background-color: rgba(59, 59, 59, 0.5);
    		background-size: 34px;
    		top: 20px;
    		height: 34px;
    		position: fixed;
    		right: 20px;
    		width: 34px;
    		z-index: 999;
    		text-align:center;
    		line-height:30px;
    		color:#fff;
    		border-radius:50%;
    		border:1px solid #fff;
    		display:block
    	}
    	.tousu{
    		top:65px;
    		font-size:12px
    	}
    	.link{
    		display:block
    	}
    	.music-play{
    		webkit-animation: musicplay 2.5s linear 0s infinite;
    		animation: musicplay 2.5s linear infinite;
    	}
    	@keyframes musicplay{
    		0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
    		100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
    	}
    	.form{
    		width:80%;
    		margin: 20px auto
    	}
    	.form-item{
    		overflow:hidden;
    		margin-bottom:15px;
    	}
    	.form-item .label{
    		float:left;
    		width:80px;
    		height:30px;
    		line-height:30px;
    		padding-right:15px;
    		text-align:right;
    	}
    	.form-item .form-input{
    		float:left;
    		width:calc(100% - 100px)
    	}
    	.form-item .form-input .input{
    		width:100%;
    		height:36px;
    		line-height:36px;
    		padding:5px;
    		border:1px solid #666
    	}
    	.form-item .form-input textarea{
    		min-height: 100px;
		    height: auto;
		    line-height: 20px;
		    padding:5px;
		    border:1px solid #666;
		    width:100%
    	}
    	.submit-btn{
    		display:block;
    		width:100%;
    		padding:6px;
    		background:#f1d104;
    		color:#333;
    		text-align:center
    	}
    	.file-box{
    		width:100%;
    		position:relative;
    	}
    	.file-box input{
    		opacity: 0;
		    z-index: 10;
		    position: absolute;
		    top: 0;
		    left: 0;
		    bottom:0;
		    right:0;
    	}
    	.shop-logo{display:block;height:auto;max-width:100%}
    </style>
    <script type="text/javascript" src="/${BasePath}/static/js/zepto.min.js"></script>
    <script type="text/javascript" src="/${BasePath}/static/layui/layui.all.js"></script>
    <script type="text/javascript" src="/${BasePath}/static/js/axios.min.js"></script>

</head>
<body>
	<div id="app">
		<div class="music music-play" onclick="say()">
			<i class="fa fa-music"></i>
		</div>
		<audio id="audio" loop="loop" style="display:none;width:0;height:0;" autoplay></audio>
	    <div class="swiper-container">
	        <img  id="img1" class="img">
	    </div>
	    <a id="adurl"><div class="swiper-container">
	        <img  id="img2" class="img">
	    </div></a>
	    <div class="head flex">
	        <div class="weui-flex">
	            <div class="weui-flex__item"><div class="placeholder">已报名<p id="bm">0</p></div></div>
	            <div class="weui-flex__item"><div class="placeholder">点赞次数<p id="dz">0</p></div></div>
	            <div class="weui-flex__item"><div class="placeholder">访问量<p id="fw">0</p></div></div>
	        </div>
	    </div>
	  	<form id="playerForm" class="form">
	  	    <img  name="playerpicbig" id="playerpic" style="display:none">
	  		<img  name="playerpicbig" id="playerpic1" style="display:none">
	  	    <input type="hidden" name="activityid" id="activityid" value="${activityid!'0'}">
	  		<div class="form-item">
	  			<div class="label">
	  			姓名
	  			</div>
	  			<div class="form-input">
	  				<input type="text" class="input" name="name" id="name">
	  			</div>
	  		</div>
	  		<div class="form-item">
	  			<div class="label">
	  			生活照
	  			</div>
	  			<div class="form-input file-box">
	  				<div class="file-box">
	                   <img id="upload" class="shop-logo" alt="点击上传" src="/${BasePath}/static/images/upload_img.png">
	                   <input type="file" id="filebtn"  class="filebtn">
	  				</div>
	  			</div>
	  		</div>
	  		
	  		<div class="form-item">
	  			<div class="label">
	  			简介
	  			</div>
	  			<div class="form-input">
	  				<textarea name="declaration" id="desc"></textarea>
	  			</div>
	  		</div>
	  		<div class="form-item">
	  			<a class="submit-btn" id="submit">确认报名</a>
	  		</div>
	  	</form>
	
	    
	
	    <div class="weui-tabbar fixed-bottom">
	        <a :href="'/${BasePath}/free/playerList?activityid=' +activityid" class="weui-tabbar__item">
	            <span style="display: inline-block;position: relative;">
	                <i class="weui-tabbar__icon fa fa-home"></i>
	            </span>
	            <p class="weui-tabbar__label">首页</p>
	        </a>
	        <a :href="'/${BasePath}/free/toRankList?activityid=' +activityid" class="weui-tabbar__item">
	            <i class="weui-tabbar__icon fa fa-trophy"></i>
	            <p class="weui-tabbar__label">榜单</p>
	        </a>
	        <a :href="'/${BasePath}/free/toGift?activityid=' +activityid" class="weui-tabbar__item">
	            <i class="weui-tabbar__icon fa fa-gift"></i>
	            <p class="weui-tabbar__label">奖品</p>
	        </a>
	    </div>
	</div>
    
    <script type="text/javascript" src="/${BasePath}/static/js/common.js"></script>
    <script type="text/javascript">
    layui.use(['upload','layer'], function () {
        var upload = layui.upload;
        var layer = layui.layer;
        var index = layer.msg('加载中', {
			icon:16,
			shade:[0.5,'#333'],
			time:false
		})
        axios.get('/${BasePath}/free/getWeinxinDate',{
    		params:{
    			activityid: actid,
    			pageNo: 1
    		}
    	})
    	.then(function(response){
    		$("title").html(response.data.title);
    		$('#img1').attr('src',response.data.headpic)
    		$('#img2').attr('src',response.data.adpic)
    		$('#adurl').attr('href',response.data.adpicurl);
    		self.img3 = response.data.activitypic;
    		$('#audio').attr('src',response.data.backmusic)
    		$('#bm').html(response.data.enroll);
    		$('#fw').html(response.data.visits);
    		$('#dz').html(response.data.thumbs);
    		
    	    self.activityid = getUrlParam('activityid');
    	    layer.close(index);
    		
    	})
    	.catch(function(error){
    		console.log(error);
    	})
        
        $('body').on('change', '#filebtn', function () {
        	imageDeal(this, dealChange);
          });

        var dealChange = function(blob, base64) {
        	var fd = new FormData();
        	fd.append("file", blob); //fileData为自定义   
        	//fd.append("houzhui", ".jpg");
        	
        }
        var imageDeal = function(ele, returnBase64) {
        	//获取file，转成base64
        	var file = ele.files[0]; //取传入的第一个文件
        	console.log(getObjectURL(ele.files[0]));
        	if(undefined == file) { //如果未找到文件，结束函数，跳出
        		return;
        	}
        	console.log("fileSize" + file.size);
        	console.log(file.type);
         
        	var r = new FileReader();
        	r.readAsDataURL(file);
        	r.onload = function(e) {
        		var base64 = e.target.result;
        		var bili = 4;
        		console.log("压缩前：" + base64);
        		$('#upload').attr("src",base64);
        		suofang(base64, bili, returnBase64);
        		suofang1(base64, 4, returnBase64);
        	}
        }
        var suofang = function(base64, bili, callback) {
        	console.log("执行缩放程序,bili=" + bili);
        	//处理缩放，转格式
        	var _img = new Image();
        	_img.src = base64;
        	_img.onload = function() {
        		var _canvas = document.createElement("canvas");
        		var w = this.width / bili;
        		var h = this.height / bili;
        		_canvas.setAttribute("width", w);
        		_canvas.setAttribute("height", h);
        		_canvas.getContext("2d").drawImage(this, 0, 0, w, h);
        		var base64 = _canvas.toDataURL("image/jpeg");
        		console.log(base64);
        		$('#playerpic').attr("src",base64);
        		_canvas.toBlob(function(blob) {
        			console.log(blob.size);
        			
        			if(blob.size > 1024*1024){
        				suofang(base64, bili, callback);
        			}else{
        				callback(blob, base64);
        			}
        		}, "image/jpeg");
        	}

        }
        var suofang1 = function(base64, bili, callback) {
        	console.log("执行缩放程序,bili=" + bili);
        	//处理缩放，转格式
        	var _img = new Image();
        	_img.src = base64;
        	_img.onload = function() {
        		var _canvas = document.createElement("canvas");
        		var w = this.width / bili;
        		var h = this.height / bili;
        		_canvas.setAttribute("width", w);
        		_canvas.setAttribute("height", h);
        		_canvas.getContext("2d").drawImage(this, 0, 0, w, h);
        		var base64 = _canvas.toDataURL("image/jpeg");
        		console.log(base64);
        		$('#playerpic1').attr("src",base64);
        		_canvas.toBlob(function(blob) {
        			console.log(blob.size);
        			
        			if(blob.size > 1024*1024){
        				suofang(base64, bili, callback);
        			}else{
        				callback(blob, base64);
        			}
        		}, "image/jpeg");
        	}

        }
    
        function getObjectURL(file) {
    		var url = null;
    		if (window.createObjectURL != undefined) { // basic
    			url = window.createObjectURL(file);
    		} else if (window.URL != undefined) { // mozilla(firefox)
    			url = window.URL.createObjectURL(file);
    		} else if (window.webkitURL != undefined) { // webkit or chrome
    			url = window.webkitURL.createObjectURL(file);
    		}
    		return url;
    	}
    	
        var uploadInst = upload.render({
          elem: '#upload111', //绑定元素
          url: '/${BasePath}/upload/springUpload', //上传接口
          method: "post",
          auto: false,
          choose: function (obj) { //选择文件后的回调
            var files = obj.pushFile();
            var filesArry = [];
            for (var key in files) { //将上传的文件转为数组形式
              filesArry.push(files[key])
            }
            var index = filesArry.length - 1;
            var file = filesArry[index]; //获取最后选择的图片,即处理多选情况
     
            if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1]
                .replace(/[ ]/g, "").replace("MSIE", "")) < 9) {
              return obj.upload(index, file)
            }
            canvasDataURL(file, function (blob) {
              var aafile = new File([blob], file.name, {
                type: file.type
              })
              var isLt1M;
              if (file.size < aafile.size) {
                isLt1M = file.size
              } else {
                isLt1M = aafile.size
              }
     
              if (isLt1M / 1024 / 1024 > 2) {
                return layer.msg('上传图片过大！')
              } else {
                if (file.size < aafile.size) {
                  return obj.upload(index, file)
                }
                console.log(aafile);
               
              }
            })
          },
          before: function(obj){
              //预读本地文件示例，不支持ie8
              obj.preview(function(index, file, result){
                  $('#upload').attr('src', result); //图片链接（base64）
              });
          },
         /*  done: function (res) {
            if(res){
            	layer.msg('上传成功');
            	$("#playerpicbig").val(data.path);
            }
          }, */
          error: function () {
            //请求异常回调
          }
        });
      });
    function canvasDataURL(file, callback) { //压缩转化为base64
        var reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function (e) {
          const img = new Image()
          const quality = 0.8 // 图像质量
          const canvas = document.createElement('canvas')
          const drawer = canvas.getContext('2d')
          img.src = this.result
          img.onload = function () {
            canvas.width = img.width
            canvas.height = img.height
            drawer.drawImage(img, 0, 0, canvas.width, canvas.height)
            convertBase64UrlToBlob(canvas.toDataURL(file.type, quality), callback);
          }
        }
      }
    function convertBase64UrlToBlob(urlData, callback) { //将base64转化为文件格式
        const arr = urlData.split(',')
        const mime = arr[0].match(/:(.*?);/)[1]
        const bstr = atob(arr[1])
        let n = bstr.length
        const u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        callback(new Blob([u8arr], {
          type: mime
        }));
      }
    function say() {
        if(audio.paused){
     	   $(".music").addClass('music-play');
     	   audio.play();
        }
        else{
     	   $(".music").removeClass('music-play');
     	   audio.pause();
        }
    }
	    var actid = ${activityid!''};
	    var index;
    	/* var vm = new Vue({
    		el: '#app',
    		data:{
    			img1: '',
    			img2: '',
    			adpicurl: '',
    			img3: '',
    			start: '',
    			end: '',
    			thumbs: '',
    			enroll: '',
    			music: '',
    			visits: '',
    			list: [],
    			activityid: ''
    		},
    		beforeCreate:function(){
    			
    		},
    		created:function(){
    			this.getData();
    			
    		},
    		methods:{
    			getData:function(){
    				var self = this;
    				axios.get('/${BasePath}/free/getWeinxinDate',{
    		    		params:{
    		    			activityid: actid,
    		    			pageNo: 1
    		    		}
    		    	})
    		    	.then(function(response){
    		    		$("title").html(response.data.title);
    		    		self.img1 = response.data.headpic;
    		    		self.img2 = response.data.adpic;
    		    		self.adpicurl = response.data.adpicurl;
    		    		self.img3 = response.data.activitypic;
    		    		self.music = response.data.backmusic;
    		    		self.enroll = response.data.enroll;
    		    		self.visits = response.data.visits;
    		    		self.thumbs = response.data.thumbs;
    		    	    self.end = response.data.end_time;
    		    	    self.start = response.data.start_time;
    		    	    self.activityid = getUrlParam('activityid');
    		    	    layer.close(index);
    		    		
    		    	})
    		    	.catch(function(error){
    		    		console.log(error);
    		    	})
    			},
    			say: function(event) {
    		           if(audio.paused){
    		        	   $(".music").addClass('music-play');
    		        	   audio.play();
    		           }
    		           else{
    		        	   $(".music").removeClass('music-play');
    		        	   audio.pause();
    		           }
    		           
    		    }
    		}
    	}) */
 
        /* 上传图 */
       
      
        function upfile() {
            var fileSize = $("#upfile")[0].files[0].size;//文件的大小，单位为字节B
            if(fileSize > 10485760) {
                layer.open({
				    content: '请上传大小小于10M的图片'
				    ,skin: 'msg'
				    ,time: 2 
				});
            }else{
            	layer.open({
    	    	    type: 2
    	    	    ,shadeClose: false
    	    	    ,content: '图片上传中'
    	    	});
                $.ajaxFileUpload({
                    secureuri: false,
                    url: "/${BasePath}/upload/springUpload",
                    dataType: "json",
                    //fileElementId是img标签的id  
                    fileElementId: 'upfile',
                    success: function(data) {
                    	console.log(data);
                    	if(data.path){
                    		//上传成功后改变<img>标签的src地址，id参数其实不需要，主要是为了刷新img的图片资源。  
                            $("#upload").attr("src", data.path);
                            $("#playerpicbig").val(data.path);
                            //重新绑定事件，防止二次上传时失效  
                            setTimeout(function() {
                            	layer.closeAll()
	    	         	    },4000)
                            $("#upfile").on("change", upfile);
                            
                    	}
                       
                    }
                });        	
            }
        }
        var clicktag = 0;
        $("#submit").click(function(){
        	if($('#name').val() == "" ){
        		layer.msg("姓名不能为空");
        		return false;
        	}
        	if($('#playerpicbig').val() == "" ){
        		layer.msg("请上传生活照");
        		
        		return false;
        	}
        	if($('#desc').val() == "" ){
        		layer.msg("简介不能为空");
        		return false;
        	}
        	if (clicktag == 0) {
        		clicktag = 1;
                setTimeout(function () {clicktag = 0}, 10000);
                var index1 = layer.msg('加载中', {
        			icon:16,
        			shade:[0.5,'#333'],
        			time:false
        		})
	            $.ajax({
	                type: "POST",
	                url: "/${BasePath}/free/saveOrUpdatePlayer",
	                data: {
	                	name: $('#name').val(),
	                	declaration: $('#desc').val(),
	                	playerpicbig: $('#playerpic').attr('src'),
	                	playerpic: $('#playerpic1').attr('src'),
	                	activityid: $('#activityid').val(),
	                	id: '0'
	                },
	                error: function(request) {
	                    layer.msg('请稍后再试');
	                },
	                success: function(data) {
	                    if(data.code = "1") {
	                    	layer.msg("报名成功",{time:1000},function(){
	                    		window.location.href="/${BasePath}/free/playerList?activityid=" +actid;
	                    	})
	                    	
	                    } else {
	                    	layer.msg(data.msg);
	                    }
	                }
	            });
        	}
        	else{
        		layer.msg('请勿重复提交');
        	}
        });
    </script>
</body>
</html>
